<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>WebRTC Native to OpenCV Integration</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="symple.player.css">
    <link rel="stylesheet" type="text/css" href="main.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.5/socket.io.js"></script>
    <script type="text/javascript" src="symple.js"></script>
    <script type="text/javascript" src="symple.client.js"></script>
    <script type="text/javascript" src="symple.player.js"></script>
    <script type="text/javascript" src="symple.player.webrtc.js"></script>
    <script type="text/javascript" src="detection.js"></script>
    <script>
      // Symple client options
      CLIENT_OPTIONS = {
        url: 'http://localhost:<%- port %>',
        peer: <%- JSON.stringify(peer) %>,
        // url: 'http://sympleserver.sourcey.com:<%- port %>',
        // secure: true
      }
      // WebRTC config
      // This is where you would add TURN servers for use in production
      WEBRTC_CONFIG = {
        'iceServers': [
          // {'url': 'stun:stun.l.google.com:19302'}
        ]
      }
      // Intercept Symple log messages
      Symple.log = function () {
        var args = Array.prototype.slice.call(arguments);
        $('#webrtc-logs').append(JSON.stringify(args)).append('\n');
        console.log.apply(console, arguments);
      }
    </script>
    <script type="text/javascript" src="main.js"></script>
</head>
<body>
<div class="container">
    <div class="alert alert-info alert-dismissible fade show" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        <strong>Hey there!</strong> This client created a WebRTC video feed that will be analyzed with OpenCV by <code>opencvanalyzer</code> sample.
    </div>
    <div class="row">
        <div class="col">
            <div id="webrtc-video" style="text-align: center;">
                <!--Hardcoded canvas sizes for video of 640x480, TODO: make it generic-->
                <canvas id="detectionCanvas" width="480" height="480"></canvas>
                <div id="videoPlayer" class="video-player">
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-header">
                    Logs
                </div>
                <div class="card-block">
                    <pre id="webrtc-logs"></pre>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
